<template>
    <div class="barEcharts">
        <div id="barEchartss"></div>
    </div>
</template>
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
     name:'gradedEchartss',
     props:{
       items : {
        type: Array,
        default() {    //默认数据，没有数剧的情况下启用
          return [{ name: '10分以下', value: 8 }, { name: '10-15分', value: 7 },{ name: '15-20分', value:8 },{ name: '20-25分', value: 12 },{ name: '25分以上', value: 9 }]
        }
      },
     },
     watch: {
      items: {
        handler(curVal, oldVal) { //监听登陆人的科室有没改变，如果改变就执行下面的方法
          //console.log(curVal)  //新值
          this.drawGraded();
        }
      }
    },
    mounted() {
    this.drawGraded();
  },
   methods: {
    drawGraded() {
      // 基于准备好的dom，初始化echarts实例
      let gradedEchartss = echarts.init(document.getElementById('barEchartss'))
      // 绘制图表
      gradedEchartss.setOption({
      	tooltip: {
        trigger: 'item'	
        },
      	legend : {// 对应series的name
				data: this.items
    },
     calculable : true,
        xAxis: {
        	type : 'category',
        	data: this.items.name,
        	axisTick: {
              alignWithLabel: true
           }
          },
        yAxis: {
        	type : 'value'
        },
        series: [{
          name: '',
          type: 'bar',
           barWidth: 40,
            label: {
               normal: {
                    show: true,
                    position:'top', //标签的位置    
                }
              },
          itemStyle: {   //配置样式，设置每个柱子的颜色
               normal:{  
                  color: function (params){
                    var colorList = ['#FFBA06', '#02BB96', '#F44336','#11A7F3','#4AF17C'];
                   return colorList[params.dataIndex];
               }
         }
     },
          data: this.items
        }],
      });
      window.addEventListener('resize', function () {
        gradedEchartss.resize()
      })
    }
  }
}
</script>
<style scoped>
#barEchartss{
  width: 100%;
  height:260px;
	box-sizing:border-box;
}

</style>
